<template>
  <div class="bigBox">
    <div class="title">
      <p>(您有一次抽奖的机会)</p>
    </div>
    <lottery
      ref="lottery"
      @getlotteryPosition="getlotteryPosition"
      :lotteryCount="lotteryCount"
      :prizeImages="prizeImages"
      :lotteryButtonImage="lotteryButtonImage"
    ></lottery>
  </div>
</template>

<script>
import lottery from "@/components/lottery";
export default {
  props: {},
  data() {
    return {
      lotteryCount: 99, //抽奖次数
      prizeImages: [
        "https://imgsa.baidu.com/forum/w%3D580/sign=3d09250101b30f24359aec0bf894d192/a4935fdf8db1cb130fd4b273d354564e93584bc8.jpg",
        "https://imgsa.baidu.com/forum/w%3D580/sign=a8406e328b35e5dd902ca5d746c7a7f5/00699922720e0cf33048c09b0446f21fbf09aacb.jpg",
        "https://imgsa.baidu.com/forum/w%3D580/sign=bb0e7247713e6709be0045f70bc69fb8/a196caef76094b36b027958dadcc7cd98c109dd0.jpg",
        "https://imgsa.baidu.com/forum/w%3D580/sign=874686d7e750352ab16125006342fb1a/31b086d6277f9e2fbabd94681130e924b999f386.jpg",
        "https://imgsa.baidu.com/forum/w%3D580/sign=ce79487465600c33f079dec02a4c5134/d3928326cffc1e172f9807514490f603738de963.jpg",
        "https://imgsa.baidu.com/forum/w%3D580/sign=17e22775b2315c6043956be7bdb1cbe6/f062242dd42a2834c387bd6b55b5c9ea15cebf6d.jpg",
        "https://imgsa.baidu.com/forum/w%3D580/sign=9f6d18bfc01b9d168ac79a69c3dfb4eb/9a7df31fbe096b631f8fd43002338744eaf8acfc.jpg",
        "https://imgsa.baidu.com/forum/w%3D580/sign=a9a41783f31f4134e0370576151e95c1/9cec902397dda144a28ee6d2bcb7d0a20df48682.jpg"
      ], //奖品列表图片
      lotteryButtonImage:
        "http://bpic.588ku.com/element_list_pic/19/03/06/d37fe3d0290ca3baf34502a24db4a42e.jpg" //抽奖按钮图片
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    getlotteryPosition() {
      let that = this;
      //模拟网络请求时间
      setTimeout(function() {
        // 中奖位置
        let lotteryPosition =
          Math.floor(Math.random() * 5) + Math.floor(Math.random());
        that.$refs.lottery.stop(lotteryPosition);
      }, 1000);
    }
  },
  components: {
    lottery
  }
};
</script>

<style scoped >
.bigBox {
  width: 100%;
  height: 100%;
  background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1587895186297&di=c768d87bd6b46fc6350f9888f701d05f&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F607cc74d463c2c0f93699fe92756e1e8ef5fa202219c8-3lIXWp_fw658);
  background-size: 100%;
}
.title {
  width: 100%;
  height: 100px;
  
}
.title p {
    color: red;
    text-align: center;
    line-height: 100px;
  }
</style>
